<template>
  <div class="home">
    <!-- 轮播 -->
    <van-swipe :autoplay="3000" :height=220 indicator-color='#888888'>
      <van-swipe-item touchable v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>

    <!-- 功能 -->
    <van-grid icon-size="65px" :column-num="4" :border="false">
      <van-grid-item icon="" text="整租" />
      <van-grid-item  icon="" text="合租" />
      <van-grid-item icon="" text="地图找房" />
      <van-grid-item @click="quchuzu" icon="" text="去出租" />
    </van-grid>

    <!-- 租房小组 -->
    <div class="zufang">
      <h4>租房小组</h4>
      <a href="#">更多</a>
    </div>
    <!-- 租房模块 -->
    <ul class="zufangmokaui">
      <li v-for="item in list" :key="item.id">
        <div class="pic">
          <img :src="item.imgSrc" alt=""/>
        </div>
        <div class="txt">
          <p>{{item.title}}</p>
          <p>{{item.desc}}</p>
        </div>
      </li>
    </ul>

    <!-- 搜索 -->
    <van-search class="search"
                background="rgba(255, 255, 255, 0)"
                v-model="value1"
                show-action
                placeholder="请输入搜索关键词"
    >
      <template #label>
        <div @click="cityList">{{cityInfo.label}}<span> | </span></div>
      </template>
      <template #action>
        <van-icon name="map-marked" size="25" @click="$router.push('/find')" color="#fff" />
      </template>
    </van-search>
  </div>
</template>
<script>
import { swiper, zufang } from '@/api/house'
import { getToken } from '@/utils/storage'
export default {
  name: 'HmHome',
  methods: {
    cityList () {
      this.$router.push('/cityList')
    },
    quchuzu () {
      getToken() ? this.$router.push('/fangyuan') : this.$router.push('/login')
    }
  },
  data () {
    return {
      images: [],
      value1: '',
      list: [],
      cityInfo: {
        j: '#',
        label: '上海',
        pinyin: 'shanghai',
        short: 'sh',
        value: 'AREA|dbf46d32-7e76-1196'

      }
    }
  },
  async created () {
    // localStorage.setItem('cityInfo', JSON.stringify(this.cityInfo))
    // 轮播图
    if (JSON.parse(localStorage.getItem('cityInfo'))) {
      this.cityInfo = JSON.parse(localStorage.getItem('cityInfo'))
    } else {
      localStorage.setItem('cityInfo', JSON.stringify(this.cityInfo))
    }
    { const { body } = await swiper()
      this.images = body.map(item => 'http://liufusong.top:8080' + item.imgSrc) }
    // 租房小组
    { const { body } = await zufang()
      this.list = body.map(item => {
        item.imgSrc = 'http://liufusong.top:8080' + item.imgSrc
        return item
      })
    }
  }
}
</script>

<style lang='less' scoped>
// .van-swipe-item {
//     color: #fff;
//     font-size: 20px;
//     line-height: 150px;
//     text-align: center;
//     background-color: #39a9ed;
img{
      width: 100%;
      height: 100%;
      // background-color: rgba(255, 255, 255, 0);
    }
.home{
  position: relative;
  background-color: #f6f5f6;
  .zufang{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    a{
      display: block;
      color: #9f9c9c;
      font-size: 14px;
    }
  }
  .zufangmokaui {
    padding-bottom: 10px;
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    flex-wrap: wrap;
    li{
      display: flex;
      justify-content: center;
      background-color: #fff;
      width: 45%;
      font-size: 12px;
      // border: 2px solid black;
      margin-top: 10px;
      text-align: center;
      .pic{
        width: 40%;
        margin-right: 20px;

      }
    }
  }
  .search{
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%);
    z-index: 99;
    width: 90%;
  }
  }
</style>
